<template>
    <div class="breadcrumb">
      <!-- 使用 element-plus 的面包屑组件 -->
      <el-breadcrumb :separator-icon="ArrowRight">
        <!-- 循环渲染面包屑导航项 -->
        <el-breadcrumb-item v-for="(crumb, index) in breadcrumbs" :key="index">
          <!-- 使用路由链接包装每个面包屑导航项 -->
          <router-link :to="crumb.to">{{ crumb.title }}</router-link>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
  </template>
  
  <script setup lang="ts">
  // 导入所需的模块
import { computed } from 'vue';
import { useRouter } from 'vue-router';
import { ArrowRight } from '@element-plus/icons-vue'
  // 获取当前路由实例
  const router = useRouter();
  
  // 使用 computed 函数计算面包屑导航项
  const breadcrumbs = computed(() => {
    // 从当前路由匹配的规则中筛选出带有 isBreadcrumb 元信息的规则
    const matchedRoutes = router.currentRoute.value.matched.filter(route => route.meta && route.meta.isBreadcrumb);
    // 根据匹配到的路由规则生成面包屑导航项
    return matchedRoutes.map(route => ({
      to: route.path, // 面包屑导航项的链接路径
      title: route.meta.title, // 面包屑导航项的标题
    }));
  });
  </script>
  
  <style scoped>
  .breadcrumb {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start; 
    text-align: right;
    margin: 0 20px;
    flex: 1;
  }
  </style>